<template>
  <div class="bottomNav_box">
    <div class="nav_item" @click="changeNav(1)">
      <i clickVoice="true" class="home" :class="{'active': navIndex == 1}"></i>
      <span clickVoice="true">首页</span>
    </div>
    <div clickVoice="true" class="nav_item" @click="changeNav(2)">
      <i clickVoice="true" class="mine" :class="{'active': navIndex == 2}"></i>
      <span clickVoice="true">我的</span>
    </div>
  </div>
</template>


<style scoped>
.bottomNav_box {
  display: flex;
  height: 100%;
}
.nav_item {
  width: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.nav_item span {
  font-size: .32rem;
  /* color: #FF333333; */
}
.nav_item i {
  margin-bottom: .093333rem;
}

.home {
  width: .613333rem;
  height: .546667rem;
  display: inline-block;
  background: url('../../assets/img/icon_menu1_blur.png') 0 0 no-repeat;
  background-size: contain;
}

.active.home {
  background: url('../../assets/img/icon_menu1.png') 0 0 no-repeat;
  background-size: contain;
}

.mine {
  width: .653333rem;
  height: .56rem;
  display: inline-block;
  background: url('../../assets/img/icon_menu2_blur.png') 0 0 no-repeat;
  background-size: contain;
}
.active.mine {
  background: url('../../assets/img/icon_menu2.png') 0 0 no-repeat;
  background-size: contain;
}
</style>

<script>
export default {
  data() {
    return {
      navIndex: 1,
    }
  },
  created() {
    this.openId = localStorage.getItem('openId');
    
    let route = this.$route
    if(route.name == 'home') {
      this.navIndex = 1
    }else if(route.name == 'mine'){
      this.navIndex = 2
    }
  },
  methods: {
    changeNav(index) {
      switch (index) {
        case 1:
          this.$router.replace({
            name: 'home',
          })
          break;
        case 2:
          this.$router.replace({
            name: 'mine',
            params: {
              openId: this.openId
            }
          })
          break;
      
        default:
          break;
      }
      this.navIndex = index;
    }
  },

}
</script>